<template>
  <div class="app-container">
    <!-- 顶部搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入脚本名或者key"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>

        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column label="key" align="left" prop="grKey" width="150"/>
      <el-table-column label="标题" align="left" prop="grTitle" :show-overflow-tooltip="true" width="400"/>
      <el-table-column label="分组" align="left" prop="grCategory" width="150">
        <template slot-scope="scope"><el-tag type="info1" v-html="scope.row.grCategory"></el-tag></template>
      </el-table-column>
      <!--<el-table-column label="语言" align="left" prop="lang" width="100"/>-->
      <el-table-column label="创建人" align="left" prop="createBy" width="100"/>
      <el-table-column label="版本" align="left" prop="version" width="100"/>
      <el-table-column label="最后更新时间" align="left" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateBase(scope.row)"
            v-hasPermi="['system:groovy:edit']"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleUpdateScript(scope.row)"
            v-hasPermi="['system:groovy:edit']"
          >编辑脚本</el-button>
          <el-dropdown style="margin-left: 10px;">
            <el-button type="text" size="mini">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleRun(scope.row)" icon="el-icon-caret-right">测试运行</el-dropdown-item>
              <el-dropdown-item @click.native="handleDelete(scope.row)" divided icon="el-icon-delete" v-hasPermi="['system:groovy:remove']">
                删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="脚本key" prop="grKey">
              <el-input v-model="form.grKey" placeholder="脚本key"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题" prop="grTitle">
              <el-input v-model="form.grTitle" placeholder="请输入标题" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分组" prop="grCategory">
              <el-input v-model="form.grCategory" placeholder="请输入分组" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="语言" prop="grCategory">
              <el-input v-model="form.lang" placeholder="请选择语言" :readonly="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="grDesc">
          <el-input v-model="form.grDesc" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="脚本内容" prop="grDesc">
          <el-input v-model="form.source" type="textarea" placeholder="请使用“编辑脚本”功能进行编辑" :rows="6" :readonly="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 测试运行的返回结果 -->
    <el-dialog :visible.sync="runDialog.open" title="执行结果" width="40%">
      <pre>{{ JSON.stringify(runDialog.res, null, 2) }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="runDialog.open = false">关闭</el-button>
        <el-button type="primary" @click="runDialog.open = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import * as groovyJS from "@/api/tool/groovy.js";

    export default {
        name: "groovy",
        data() {
            return {
                loading: true,// 遮罩层
                ids: [],// 选中数组
                single: true,// 非单个禁用
                multiple: true,// 非多个禁用
                showSearch: true,// 显示搜索条件
                total: 0,// 总条数
                dataList: [],// 参数表格数据

                title: "",// 弹出层标题
                open: false,// 是否显示弹出层
                runDialog: {//测试运行弹出框
                    open: false
                    , source: "脚本为空"
                    , res: {'name': 'cat'}
                },
                queryParams: {// 查询参数
                    pageNum: 1,
                    pageSize: 10,
                    keyword: undefined
                },
                defaultForm: {// 表单
                    lang: "Java"
                    , grCategory: "默认分组"
                },
                form: {},
                rules: {// 表单校验
                    grKey: [
                        { required: true, message: "脚本key不能为空", trigger: "blur" }
                    ],
                    grTitle: [
                        { required: true, message: "标题不能为空", trigger: "blur" }
                    ],
                    grCategory: [
                        { required: true, message: "分组不能为空", trigger: "blur" }
                    ]
                }
            };
        },
        created() {//创建回调
            this.getList();//查询数据
        },
        methods: {
            // 查询数据
            getList() {
                this.loading = true;
                groovyJS.list(this.queryParams).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.clearForm();
            },
            // 清空表单
            clearForm() {
                this.form = this.defaultForm;
                this.resetForm("form");
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!=1
                this.multiple = !selection.length
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.clearForm();
                this.open = true;
                this.title = "添加groovy脚本";
            },
            /** 修改基本信息 */
            handleUpdateBase(row) {
                this.clearForm();
                const dataId = row.id || this.ids;//支持行id和选中id
                groovyJS.get(dataId).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改groovy脚本";
                });
            },
            /** 修改脚本 */
            handleUpdateScript(row) {
                const dataId = row.id || this.ids[0];
                this.$router.push("/groovy/script/" + dataId + "/9527");
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (!valid) {//校验表单
                        return;
                    }
                    if (this.form.id != undefined) {//id不为空表示修改
                        groovyJS.save(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        groovyJS.save(this.form).then(response => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const dataId = row.id || this.ids;
                this.$confirm('确认删除数据?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return groovyJS.remove(dataId);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有数据?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return groovyJS.excel(queryParams);
                }).then(response => {
                    this.download(response.msg);
                })
            },
            handleRun(row){
                this.$confirm('请确保脚本语言为Java，且包含一个无参的run方法。是否继续?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return groovyJS.runByKey(row.grKey);
                }).then(res => {
                    this.runDialog.source = row.source;
                    this.runDialog.res = res;
                    this.runDialog.open = true;
                });
            }
        }
    };
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  /* 使顶部进行吸顶 */
  .top {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
  }
  /* 表单大小设置 */
  .el-dialog {
    margin: 0 auto !important;
    height: 60%;
    overflow: hidden;
  }
  .el-dialog__body {
    position: absolute;
    left: 10px;
    top: 54px;
    bottom: 70px;
    right: 10px;
    padding: 0px;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
  }
  /**表单 确定和取消 按钮的位置 */
  .el-dialog__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  /* 表单输入框的大小 */
  .el-input {
    width: 50%;
  }

  /* 弹出框滚动条 */
  /* 设置滚动条的样式 */
  /**解决了滚动条之间发生错位的现象 */
  ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    /* 滚动条的颜色 */
    background-color: #e4e4e4;
  }
</style>
